<script setup>
import { ref } from 'vue'
import '@/assets/common/el-table.scss'
import '@/assets/common/common.scss'
import { Refresh, Pause, PlayOne, Return, Like } from '@icon-park/vue-next'
import { useRouter } from 'vue-router'
import MusicPlayRight from '@/components/music/MusicPlayRight.vue'
import { randomListService } from '@/api/music.js'
import { successMsg, warningMsg } from '@/utils/sendMsgUtils.js'
import { delSongService, likeSongService } from '@/api/userLike.js'
import { isCode1 } from '@/utils/response.js'


const music = ref({
  index: '',
  id: ''
})
const sendMusic = (m, index) => {
  music.value = m
  music.value.index = index
  music.value.time = Date.now()
}

const router = useRouter()
const tableData = ref([])
const randomList = async () => {
  const resp = await randomListService(10)
  if (resp.code === 1) {
    tableData.value = resp.data
  }
}
randomList()

const playFirst = async () => {
  sendMusic(tableData.value[0], 0)
}

const nextMusic = () => {
  // 判断是否有下一首
  if (music.value.index + 1 < tableData.value.length) {
    // 获取下一首歌曲的索引
    let nextIndex = music.value.index + 1
    // 更新音乐并播放
    sendMusic(tableData.value[nextIndex], nextIndex)
  } else {
    warningMsg('已经到达尽头咯！')
  }
}
const preMusic = () => {
  // 判断是否有下一首
  if (music.value.index - 1 > 0) {
    // 获取下一首歌曲的索引
    let preIndex = music.value.index - 1
    // 更新音乐并播放
    sendMusic(tableData.value[preIndex], preIndex)
  } else {
    warningMsg('已经到达尽头咯！')
  }
}
const likeSong = async (sid, index) => {
  const resp = await likeSongService(sid)
  if (isCode1(resp)) {
    tableData.value[index].isLove = true
    successMsg(resp.data)
  }
}
const delSong = async (sid, index) => {
  const resp = await delSongService(sid)
  if (isCode1(resp)) {
    tableData.value[index].isLove = false
    successMsg(resp.data)
  }
}
const clickD = async (row, column) => {
  if (column.no === 1 || column.no === 6) return
  await router.push('/details?id=' + row.id)
}
</script>

<template>
  <div class="random-page">
    <div class="left">
      <div class="table-list">
        <div class="btns">
          <el-button type="primary" color="#11659a" plain @click="playFirst">
            <play-one class="icon-center" theme="outline" size="20" />&nbsp;
            播放随机歌曲
          </el-button>
          <el-button type="primary" color="#11659a" plain @click="randomList">
            <refresh class="icon-center" theme="outline" size="20" />&nbsp;
            重新随机
          </el-button>
          <el-button type="primary" color="#11659a" plain @click.prevent="router.push('/')">
            <return class="icon-center" theme="outline" size="20" />&nbsp;
            返回
          </el-button>
        </div>
        <el-table @cell-click="clickD" :data="tableData" style="width: 100%">
          <el-table-column align="center" type="index" label="顺序" />
          <el-table-column align="center" width="80" label="收藏">
            <template #default="scope">
              <div class="icon-center">
                <like v-if="!scope.row.isLove"
                      theme="outline"
                      size="18"
                      :strokeWidth="5"
                      @click="likeSong(scope.row.id, scope.$index)" />
                <like v-else
                      theme="two-tone"
                      size="20"
                      :fill="['#74759b' ,'#f1939c']"
                      @click="delSong(scope.row.id, scope.$index)"/>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="name" label="歌曲" />
          <el-table-column prop="artist" label="歌手" />
          <el-table-column prop="album" label="专辑" />
          <el-table-column prop="duration" label="时长" />
          <el-table-column align="center" width="80" label="播放">
            <template #default="scope">
              <div class="icon-center">
                <play-one v-if="scope.$index !== music.index"
                          @click="sendMusic(scope.row, scope.$index)"
                          theme="outline"
                          size="24" />
                <pause v-else @click="sendMusic(scope.row, -1)" theme="outline" size="24" />
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <div class="right">
      <music-play-right @pre="preMusic" :music="music" @next="nextMusic" />
    </div>
  </div>

</template>

<style scoped>
.random-page {
  padding: 10vh 0;
  height: 100vh;
  background-image: url('@/assets/image/sek.png');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;

  .left {
    width: 65%;
    margin-left: 5%;

    .table-list {
      .btns {
        margin: 5px 0;
      }

      .icon-center {
        cursor: pointer;
      }
    }
  }

  .right {
    width: 30%;
    padding: 0 0;
  }
}


</style>
